<template>
	<view style="display: flex;flex-direction: column;">
		
		<view class="content-card bottom-space">

			<view class="title-dot">订单信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">订单编号</text>
					<text class="value">{{datadetail.orderEncryptId||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">订单状态</text>
					<text class="value">{{datadetail.orderStatusName||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">订单来源</text>
					<text class="value">{{datadetail.orderSource||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">订单创建时间</text>
					<text class="value">{{datadetail.createOrderDateTime||'--'}}</text>
				</view>

			</view>

		</view>
		
		<view class="content-card bottom-space">

			<view class="title-dot">预定信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">预定车型</text>
					<text class="value">{{datadetail.reserveVehicleInfos||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">预约取车时间</text>
					<text class="value">{{datadetail.estimatedPickUpTime||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">预约还车时间</text>
					<text class="value">{{datadetail.estimatedPickOffTime||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">租期天数</text>
					<text class="value">{{datadetail.rentDays||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">租期小时</text>
					<text class="value">{{datadetail.rentHours||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">取车门店</text>
					<text class="value">{{datadetail.pickUpStoreName||'--'}}({{datadetail.orderIsSendNameForPickUp}})</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">还车门店</text>
					<text class="value">{{datadetail.pickOffStoreName||'--'}}({{datadetail.orderIsSendNameForPickOff}})</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">取车地址</text>
					<text class="value">{{datadetail.pickUpAddress||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">还车地址</text>
					<text class="value">{{datadetail.pickOffAddress||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">备注</text>
					<text class="value">{{datadetail.remark||'--'}}</text>
				</view>

			</view>

		</view>
		
		<view class="content-card bottom-space">

			<view class="title-dot">客户信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">客户名称</text>
					<text class="value">{{datadetail.costumerName||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">客户电话</text>
					<text class="value">{{datadetail.costumerTel||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">证件号</text>
					<text class="value">{{datadetail.constumerId||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">客户类型</text>
					<text class="value">{{datadetail.customerTypeName||'--'}}</text>
				</view>

			</view>

		</view>
		
		<view class="content-card bottom-space">

			<view class="title-dot">费用信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">租车费</text>
					<text class="value">{{datadetail.amount||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">实际租车费</text>
					<text class="value">{{datadetail.actualAmount||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">租金支付方式</text>
					<text class="value">{{datadetail.payWayName||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">租车押金金额</text>
					<text class="value">{{datadetail.preAuthAmount||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">违章押金金额</text>
					<text class="value">{{datadetail.depPreAuthAmount||'--'}}</text>
				</view>

			</view>

		</view>

		
		<view class="content-card bottom-space" style="margin-bottom: 20rpx;">

			<view class="title-dot">取还信息</view>

			<view class="item-car" style="padding: 12rpx 23rpx;">

				<view class="order-item-wrap">
					<text class="name">车牌号</text>
					<text class="value">{{datadetail.carLicenceNum||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">车架号</text>
					<text class="value">{{datadetail.frameNum||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">实际取车时间</text>
					<text class="value">{{datadetail.actualPickUpTime||'--'}}</text>
				</view>

				<view class="order-item-wrap">
					<text class="name">实际还车时间</text>
					<text class="value">{{datadetail.actualPickOffTime||'--'}}</text>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import {
		otactripdetail
	} from '@/api/car-api.js'

	export default {
		data() {
			return {
				datadetail: {}
			}
		},
		methods: {
			getData(id) {
				otactripdetail(id).then(res => {
					this.datadetail = res.data
				})
			}
		},
		onLoad(op) {
			this.getData(op.id)
		}
	}
</script>

<style lang="scss" scoped>
	.item-car {
		background-color: #FAFAFA;
		border-radius: 8rpx;
		margin: 23rpx 23rpx 0;
		display: flex;
		flex-direction: column;
		padding: 32rpx 23rpx;

		.carno {
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
		}

		.store {
			margin-top: 23rpx;
			color: #666;
			font-size: 28rpx;
			display: flex;

			text {
				flex: 1;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.order-item-wrap {
		height: 63rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;

		.name {
			font-size: 28rpx;
			color: #666;
		}

		.value {
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
			flex: 1;
			text-align: end;
			margin-left: 10rpx;
		}
	}

	.content-card {
		margin: 20rpx 20rpx 0 20rpx;
		border-radius: 16rpx;
		background-color: white;

	}

	.title-dot {
		margin-left: 47rpx;
		color: #333;
		padding: 32rpx 0;
		font-weight: bold;
		font-size: 28rpx;
		position: relative;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			position: absolute;
			left: -16rpx;
			width: 8rpx;
			height: 24rpx;
			border-radius: 4rpx;
			background-color: #2879FF;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -47rpx;
			right: 0;
			height: 2rpx;
			background-color: #f5f5f5;
		}
	}

	.bottom-space {
		padding-bottom: 32rpx;
	}
</style>
